feat(ui): highlight files commonly shipped unnecessarily in packages by mvanhorn · Pull Request #2714 · npmx-dev/npmx.dev

mvanhorn · 2026-05-11T08:35:23Z

🔗 Linked issue

🧭 Context

The package code browser shows every file shipped in the published tarball, but offers no signal that some of those files are usually not meant to be there. The issue lists a concrete set of patterns -- editor configs, lint/format configs, test directories, .claude/, .github/, local env files -- that authors usually intend to keep out of their publish.

📚 Description

The file tree and the directory listing now flag those patterns with a small i-lucide:info indicator and an aria-label. The icon and existing layout aren't changed otherwise, and the predicate is case-sensitive to match npm's POSIX filename semantics.

The matching rules live in a new app/utils/package-content-hints.ts so follow-ups (the "surface this elsewhere" half of the issue, or carve-outs like .github/FUNDING.yml) have a single place to extend. Unit tests cover the exact filenames, the regex patterns for ESLint/Prettier/oxlint/oxfmt configs, the directory matches, and obvious negatives like index.js, package.json, src/.

i18n: added code.possibly_unnecessary to en.json, mirrored the English placeholder into every locale file that has a code section, and extended i18n/schema.json to match.

Verification

pnpm test test/unit/app/utils/package-content-hints.spec.ts
pnpm vp lint
pnpm vp run i18n:check

Adds a `possibly unnecessary` hint in the package code browser for files and directories that are commonly published to npm by accident -- editor configs (.vscode/, .editorconfig), lint/format settings, test trees, local env files, etc. Each affected node gets a subtle `i-lucide:info` indicator plus an aria-label so the cue is announced to screen readers. Closes npmx-dev#2582

vercel · 2026-05-11T08:35:29Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ready	Preview, Comment	May 31, 2026 4:09pm
npmx.dev	Ready	Preview, Comment	May 31, 2026 4:09pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		May 31, 2026 4:09pm

coderabbitai · 2026-05-11T08:35:38Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 1ce30e63-0852-4c7b-840f-baf5e14df32e

📥 Commits

Reviewing files that changed from the base of the PR and between 199995c and 5625973.

📒 Files selected for processing (2)

i18n/locales/en.json
i18n/schema.json

✅ Files skipped from review due to trivial changes (1)

i18n/locales/en.json

🚧 Files skipped from review as they are similar to previous changes (1)

i18n/schema.json

📝 Walkthrough

Summary by CodeRabbit

New Features
- Visual indicators flag potentially unnecessary package files and directories. Flagged items show yellow/amber text, an adjacent info icon and accessible tooltip.
Localization
- Added localized label for the “possibly unnecessary” status used in tooltips and aria labels.
Tests
- Added comprehensive unit tests covering detection rules, case sensitivity and file/directory disambiguation.

Walkthrough

Adds a heuristic utility that flags commonly accidental package files/directories and surfaces a localized “possibly unnecessary” hint in the file tree and directory listing with accessible labels and an info icon; includes i18n updates and unit tests.

Changes

Unnecessary Package Content Detection

Layer / File(s)	Summary
Content Heuristic Utility `app/utils/package-content-hints.ts`	`isPossiblyUnnecessaryContent(name, type)` implements sets and regexes to identify editor/config/env/test artifacts and `__...__` dirs; type-aware matching prevents directory patterns matching files.
Unit tests for heuristic `test/unit/app/utils/package-content-hints.spec.ts`	Vitest suite asserting true for editor/config/env/test patterns and false for ordinary files/directories; verifies directory-vs-file disambiguation and case-sensitive matching.
Internationalization Setup `i18n/schema.json`, `i18n/locales/en.json`	Adds `code.possibly_unnecessary` to the i18n schema and English locale for component labels/tooltips.
File Tree and Directory Listing Integration `app/components/Code/FileTree.vue`, `app/components/Code/DirectoryListing.vue`	Components import and call `isPossiblyUnnecessaryContent()` for nodes; flagged items receive a localized `:aria-label`, amber text styling, and an info icon with localized `title` and `aria-hidden="true"`. Internationalisation is accessed via `useI18n()`.

Suggested reviewers

alexdln

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main feature: highlighting files commonly shipped unnecessarily in packages, which aligns directly with the changeset's core objective.
Description check	✅ Passed	The description is well-related to the changeset, explaining the problem, solution approach, and verification steps for the feature to flag unnecessary package contents.
Linked Issues check	✅ Passed	The PR successfully implements the core requirements from issue `#2582`: flagging editor configs, lint/format configs, test directories, env files, and other unnecessary package inclusions with visual indicators and aria-labels in the UI.
Out of Scope Changes check	✅ Passed	All changes are scoped to the linked issue: UI enhancements for flagging unnecessary files, utility function with heuristics, unit tests, and i18n additions. No unrelated modifications detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2026-05-11T08:35:56Z

Hello! Thank you for opening your first PR to npmx, @mvanhorn! 🚀

Here’s what will happen next:

Our GitHub bots will run to check your changes.
If they spot any issues you will see some error messages on this PR.
Don’t hesitate to ask any questions if you’re not sure what these mean!
In a few minutes, you’ll be able to see a preview of your changes on Vercel
One or more of our maintainers will take a look and may ask you to make changes.
We try to be responsive, but don’t worry if this takes a few days.

github-actions · 2026-05-11T08:36:33Z

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
i18n/locales/en.json	Source changed, localizations will be marked as outdated.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

codecov · 2026-05-11T08:40:06Z

Codecov Report

❌ Patch coverage is 90.00000% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/utils/package-content-hints.ts	88.88%	0 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

@gameroman

…eI18n Per reviewer feedback: - @gameroman: English text shouldn't be added to non-en locale files when adding a new key. en.json is the source locale; non-en locales fall back to source automatically until a translation is contributed. - @graphieros: $t is auto-injected in templates; the const { t } = useI18n() import in FileTree.vue is unnecessary. Removes the possibly_unnecessary English string from 31 non-en locale files and switches FileTree.vue to use $t directly in template bindings.

mvanhorn · 2026-05-12T05:11:56Z

Thanks @gameroman and @graphieros, addressed both in 56dbe35:

Dropped the possibly_unnecessary English fallback from all 31 non-en locale files. en.json is unchanged; the runtime will fall back to source until contributors add native translations.
Removed const { t } = useI18n() from FileTree.vue and switched the four template bindings to $t('code.possibly_unnecessary') directly.

Merge conflict against main is the only thing still outstanding; I'll rebase separately.

gameroman · 2026-05-13T12:30:26Z

Looks nice

Here are some more files/dirs ideas that could be added:

any file/directory that starts with a dot (.xyz) as usually they're config files
any directory that is __xyz__ - usually tests, etc - probably unintentional

Also we could highlight the file/dir name as yellow, like this for example

@gameroman

Per @gameroman feedback on npmx-dev#2714: - Match __xyz__ directories via a new POSSIBLY_UNNECESSARY_DIRECTORY_PATTERNS regex set (catches __mocks__, __snapshots__, __fixtures__, etc. without enumerating each) - Add three conservative dot-prefixed config patterns (.babelrc, .stylelintrc.json, .x.config.js style). Explicit negative lookaheads exclude .npmrc since it is sometimes an intentional shipped artifact. - Apply text-yellow-600 dark:text-yellow-400 to the file/directory name span in FileTree.vue and DirectoryListing.vue when isPossiblyUnnecessaryContent returns true, complementing the existing amber info icon. Extends unit tests to cover the new patterns and pins .npmrc as a non-match so future broadening cannot silently break the exclusion. Signed-off-by: Matt Van Horn <mvanhorn@gmail.com>

gameroman · 2026-05-13T17:31:29Z

Also .travis.yml probably

And lockfiles like bun.lock, bun.lockb, package-lock.json, pnpm-lock.yanl

I'd also probably make text color a bit more dark/orange, something like this maybe

Also looks like https://npmx-m4m1wuo4h-npmx.vercel.app/package/eslint-import-resolver-node isn't loading anymore (https://main.npmx.dev/package/eslint-import-resolver-node does)

gameroman · 2026-05-13T17:40:26Z

Looks very good overall, I love it

graphieros

Coverage is ok, but I think it could be completed with test cases for:

'.env.development.local'
'.env.test'
'.env.production.local'

Also, only a few pattern extensions are tested. These are not tested:

eslint.config.cjs
eslint.config.mts
eslint.config.cts
.prettierrc.toml
prettier.config.mjs
oxlint.config.cjs
.oxlintrc.yaml
oxfmt.config.mjs
.oxfmtrc.yml

mvanhorn · 2026-05-13T18:01:32Z

@graphieros @gameroman thanks for the reviews. Pushed 33f4ff7 with the changes:

__xyz__ directories now match via a regex pattern (catches __mocks__, __snapshots__, __fixtures__, etc. without enumerating each).
Added three conservative dot-prefixed config patterns: .babelrc/.browserslistrc/.stylelintrc-style .xrc and .xrc.{json,js,yml,...} files, plus .x.config.{js,ts,...}. Negative lookaheads explicitly exclude .npmrc since it's sometimes an intentional shipped artifact. Pinned .npmrc → false in the unit test so future broadening can't silently break the exclusion.
Name spans in FileTree.vue and DirectoryListing.vue now get text-yellow-600 dark:text-yellow-400 when isPossiblyUnnecessaryContent is true, alongside the existing amber info icon.

Didn't include a blanket ^\..+ rule for all dotfiles - too much false-positive risk (.npmrc, .gitkeep, occasional .well-known style files). Happy to add more patterns if you have specific ones in mind.

[autofix.ci] apply automated fixes

19dff0a

vercel Bot deployed to Preview – npmx.dev May 11, 2026 08:39 View deployment

mvanhorn changed the title ~~feat(code): highlight files commonly shipped unnecessarily in packages~~ feat(ui): highlight files commonly shipped unnecessarily in packages May 11, 2026

gameroman reviewed May 11, 2026

View reviewed changes

Comment thread i18n/locales/ar-EG.json Outdated

graphieros requested changes May 11, 2026

View reviewed changes

Comment thread app/components/Code/FileTree.vue Outdated

vercel Bot deployed to Preview – npmx.dev May 12, 2026 05:14 View deployment

gameroman added the needs review This PR is waiting for a review from a maintainer label May 13, 2026

mvanhorn and others added 2 commits May 13, 2026 10:27

[autofix.ci] apply automated fixes

199995c

vercel Bot deployed to Preview – npmx.dev May 13, 2026 17:31 View deployment

gameroman requested review from gameroman and graphieros May 13, 2026 17:39

graphieros removed their request for review May 13, 2026 17:42

graphieros requested changes May 13, 2026

View reviewed changes

ghostdevv requested a review from graphieros May 31, 2026 16:06

Merge branch 'main' into feat/highlight-unnecessary-files-2582

5625973

vercel Bot deployed to Preview – docs.npmx.dev May 31, 2026 16:09 View deployment

vercel Bot deployed to Preview – npmx.dev May 31, 2026 16:09 View deployment

Uh oh!

Conversation

mvanhorn commented May 11, 2026

🔗 Linked issue

🧭 Context

📚 Description

Verification

Uh oh!

vercel Bot commented May 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented May 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Walkthrough

Changes

Suggested reviewers

Uh oh!

github-actions Bot commented May 11, 2026

Uh oh!

github-actions Bot commented May 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Lunaria Status Overview

Tracked Files

Uh oh!

codecov Bot commented May 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

mvanhorn commented May 12, 2026

Uh oh!

gameroman commented May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gameroman commented May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gameroman commented May 13, 2026

Uh oh!

graphieros left a comment

Choose a reason for hiding this comment

Uh oh!

mvanhorn commented May 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

vercel Bot commented May 11, 2026 •

edited

Loading

coderabbitai Bot commented May 11, 2026 •

edited

Loading

github-actions Bot commented May 11, 2026 •

edited

Loading

codecov Bot commented May 11, 2026 •

edited

Loading

gameroman commented May 13, 2026 •

edited

Loading

gameroman commented May 13, 2026 •

edited

Loading